<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>26_事件流-DOM0-高级浏览器-整体事件流</title>
        <style>
            .laoda {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: red;

            }

            .laoer {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 300px;
                height: 300px;
                background-color: aqua;
            }

            .laosan {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 100px;
                height: 100px;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <div class="laoda">
            <div class="laoer">
                <div class="laosan">

                </div>
            </div>
        </div>

        <script>
            var laoda = document.querySelector('.laoda');
            var laoer = document.querySelector('.laoer');
            var laosan = document.querySelector('.laosan');

            laoda.onclick = function(){
                console.log('laoda');
            }

            laoer.onclick = function(){
                console.log('laoer');
            }

            laosan.onclick = function(){
                console.log('laosan');
            }

            document.body.onclick = function(){
                console.log('body');
            }

            document.documentElement.onclick = function(){
                console.log('html');
            }

            document.onclick = function(){
                console.log('document');
            }

            window.onclick = function(){
                console.log('window');
            }

        </script>
    </body>
</html>